<template>
	<view class='payPwd'>
		<view class="line dFlex jStart_aCenter">
			<view class="lineTit">手机号码</view>
			<view class="lineVal">
				<view class="ipt">
					<input type="number" placeholder="请输入手机号码">
				</view>
			</view>
		</view>
		<view class="line dFlex jStart_aCenter">
			<view class="lineTit">手机号码</view>
			<view class="lineVal dFlex jEnd_aCenter">
				<view class="ipt">
					<input type="number" placeholder="请输入验证码">
				</view>
				<view class="code" @tap='getCode'>{{codeFlag?'获取':time+'s后重发'}}</view>
			</view>
		</view>
		<view class="line dFlex jStart_aCenter">
			<view class="lineTit">设置新密码</view>
			<view class="lineVal">
				<view class="ipt">
					<input type="password" placeholder="请输入新密码">
				</view>
			</view>
		</view>
		<view class="line dFlex jStart_aCenter">
			<view class="lineTit">确定新密码</view>
			<view class="lineVal">
				<view class="ipt">
					<input type="password" placeholder="请再次输入新密码">
				</view>
			</view>
		</view>
		<view class='btns'>确认</view>
	</view>
</template>

<script>
	let timer = null;
	export default {
		data() {
			return {
				codeFlag:true,
				time:60,
				datas:{},
			};
		},
		onShow(){
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			// 获取验证码
			getCode(){
				if(this.codeFlag){
					this.codeFlag = false;
					timer = setInterval(()=>{
						this.time -- ;
						if(this.time <= 0){
							this.codeFlag = true;
							this.time = 60;
							clearInterval(timer);
						}
					},1000)
				}else{
					uni.showToast({
						title:'请不要频繁操作',
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background:#F8F8F8;
	}
	.payPwd{
		width: 100%;
		padding:12px 4%;
		box-sizing:border-box;
		.btns{
			width: 100%;
			text-align: center;
			color:white;
			padding: 12px 0;
			border-radius: 50px;
			background: linear-gradient(#609ff8 0%, #1664ff 100%);
			margin-top: 30px;
		}
		.line{
			width: 100%;
			background: white;
			border-radius:3px;
			margin-bottom: 9px;
			padding: 12px 16px;
			box-sizing: border-box;
			.lineVal{
				flex: 1;
				.code{
					color: #1664FF;
				}
				.ipt{
					flex: 1;
				}
			}
			.lineTit{
				width: 28%;
			}
		}
	}
</style>
